/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import {
  Layout, Breadcrumb, Icon, Menu,
} from 'antd';
import { Route } from 'react-router-dom';
import {
  getToken, getRole, getUsername, clearToken,
} from 'services/token';
import Footer from './Footer';
import history from '../history';

const { Content, Header } = Layout;
const contentStyle = {
  background: '#fff',
  padding: 24,
  marginTop: 12,
  minHeight: 280,
};

export default function pageWrapper(Sider, routes) {
  const role = ['运维人员', '管理人员', '工艺人员', '操作人员'];
  const roleUrl = ['operation', 'manage', 'process', 'operator'];
  const url = roleUrl[getRole(getToken())];
  const roleName = role[getRole(getToken())];
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header>
        <div style={{ float: 'left' }}>
          <h2 style={{ color: '#ECF0F1' }}>
          基于微服务架构的工业互联网平台
          </h2>
        </div>
        <Menu
          theme="dark"
          mode="horizontal"
          style={{ lineHeight: '64px', float: 'right' }}
        >
          <Menu.Item
            key="1"
          >
            <Icon type="user" />
            {getUsername(getToken())}
          </Menu.Item>
          <Menu.Item
            key="2"
            onClick={() => {
              history.push(`/${url}/message`);
            }}
          >
            <Icon type="notification" />
          </Menu.Item>
          <Menu.Item
            key="3"
            onClick={() => {
              clearToken();
              history.replace('/');
            }}
          >
          登出
          </Menu.Item>
        </Menu>
      </Header>

      <Layout>
        <Sider />
        <Layout style={{ padding: '12px 24px 24px 24px' }}>
          <Breadcrumb>
            <Breadcrumb.Item>{roleName}</Breadcrumb.Item>
          </Breadcrumb>
          <Content style={contentStyle}>
            {routes.map((route) => (
              <Route
                exact
                path={route.path}
                component={route.component}
                key={route.path}
              />
            ))}
          </Content>
          <Footer />
        </Layout>
      </Layout>
    </Layout>
  );
}
